```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx与后端应用服务器通信指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8fafc;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
        }
        .code-block {
            background-color: #2d3748;
            border-radius: 0.5rem;
            position: relative;
        }
        .code-block pre {
            margin: 0;
            padding: 1.5rem;
            overflow-x: auto;
            color: #e2e8f0;
            font-family: 'Courier New', Courier, monospace;
        }
        .code-block .lang-tag {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #4a5568;
            color: white;
            padding: 0.25rem 0.75rem;
            border-bottom-left-radius: 0.5rem;
            font-size: 0.75rem;
            font-family: 'Courier New', Courier, monospace;
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(79, 70, 229, 0.1) 0%, rgba(79, 70, 229, 0.4) 50%, rgba(79, 70, 229, 0.1) 100%);
        }
        .header-anchor {
            opacity: 0;
            transition: opacity 0.3s ease;
            margin-left: 0.5rem;
            color: #4f46e5;
        }
        h2:hover .header-anchor, h3:hover .header-anchor {
            opacity: 1;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
                        Nginx与后端应用服务器通信指南
                    </h1>
                    <p class="text-xl opacity-90 mb-8">
                        深入解析Nginx作为反向代理与Tomcat、Node.js等应用服务器的高效通信机制
                    </p>
                    <div class="flex space-x-4">
                        <a href="#intro" class="px-6 py-3 bg-white text-indigo-600 font-medium rounded-full hover:bg-gray-100 transition duration-300">
                            <i class="fas fa-book-open mr-2"></i>开始阅读
                        </a>
                        <a href="#diagram" class="px-6 py-3 bg-indigo-800 bg-opacity-50 text-white font-medium rounded-full hover:bg-opacity-70 transition duration-300">
                            <i class="fas fa-project-diagram mr-2"></i>架构图
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-64 h-64 md:w-80 md:h-80">
                        <div class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 blur-xl"></div>
                        <div class="relative z-10 flex items-center justify-center w-full h-full">
                            <i class="fas fa-server text-white text-8xl md:text-9xl opacity-80"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Introduction -->
        <section id="intro" class="mb-16">
            <div class="prose prose-indigo max-w-none">
                <p class="text-lg text-gray-700 mb-6">
                    Nginx 与后端应用服务器（如 Tomcat、Node.js）的通信是 Web 服务器和应用服务器之间的关键环节。Nginx 作为反向代理服务器，将客户端的请求转发给后端应用服务器处理，获取结果后再将响应返回给客户端。
                </p>
            </div>
        </section>

        <!-- Content Navigation -->
        <section class="mb-16">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fas fa-list-ul text-indigo-500 mr-3"></i>内容导航
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <a href="#reverse-proxy" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">反向代理配置</h3>
                    <p class="text-gray-600">掌握Nginx作为反向代理的基本配置和高级设置</p>
                </a>
                <a href="#load-balancing" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">负载均衡</h3>
                    <p class="text-gray-600">实现请求在多台后端服务器间的智能分配</p>
                </a>
                <a href="#proxy-headers" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">代理请求头</h3>
                    <p class="text-gray-600">正确配置HTTP头部以传递客户端信息</p>
                </a>
                <a href="#https" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">HTTPS支持</h3>
                    <p class="text-gray-600">配置安全的HTTPS通信通道</p>
                </a>
                <a href="#websocket" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">WebSocket支持</h3>
                    <p class="text-gray-600">实现实时双向通信的代理配置</p>
                </a>
                <a href="#proxy-cache" class="card bg-white p-6 hover:bg-indigo-50 border border-gray-200">
                    <h3 class="text-xl font-semibold mb-2 text-indigo-600">代理缓存</h3>
                    <p class="text-gray-600">利用缓存提高性能并减轻后端负载</p>
                </a>
            </div>
        </section>

        <!-- Architecture Diagram -->
        <section id="diagram" class="mb-16">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i class="fas fa-project-diagram text-indigo-500 mr-3"></i>架构示意图
            </h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
                <div class="mermaid">
                    graph LR
                    A[客户端] -->|请求| B(Nginx反向代理)
                    B -->|代理请求| C1[应用服务器1]
                    B -->|代理请求| C2[应用服务器2]
                    B -->|代理请求| C3[应用服务器3]
                    C1 -->|响应| B
                    C2 -->|响应| B
                    C3 -->|响应| B
                    B -->|响应| A
                </div>
            </div>
        </section>

        <!-- Sections -->
        <!-- 1. Reverse Proxy -->
        <section id="reverse-proxy" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-exchange-alt text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    1. 反向代理配置
                    <a href="#reverse-proxy" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="basic-reverse-proxy" class="text-xl font-semibold mt-8 mb-4">
                    1.1 基本反向代理配置
                    <a href="#basic-reverse-proxy" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 可以通过 <code>proxy_pass</code> 指令将请求转发到后端应用服务器。最基本的配置示例如下：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>server {
    listen 80;
    server_name demo.com;

    location / {
        proxy_pass http://backend;
    }
}</code></pre>
                </div>
                
                <p>在这个示例中，Nginx 将所有到达 <code>demo.com</code> 的请求转发到 <code>http://backend</code>，<code>backend</code> 可以是 Tomcat、Node.js 或其他应用服务器。</p>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 2. Load Balancing -->
        <section id="load-balancing" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-balance-scale text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    2. 负载均衡
                    <a href="#load-balancing" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="load-balancing-config" class="text-xl font-semibold mt-8 mb-4">
                    2.1 配置负载均衡
                    <a href="#load-balancing-config" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 支持将请求分发到多个后端服务器，实现负载均衡。这可以通过 <code>upstream</code> 模块来配置：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>http {
    upstream backend {
        server backend1.demo.com;
        server backend2.demo.com;
    }

    server {
        listen 80;
        server_name demo.com;

        location / {
            proxy_pass http://backend;
        }
    }
}</code></pre>
                </div>
                
                <p>在这个配置中，Nginx 会根据负载均衡算法（默认是轮询）将请求分发到 <code>backend1</code> 和 <code>backend2</code>。</p>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 3. Proxy Headers -->
        <section id="proxy-headers" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-heading text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    3. 配置代理请求头
                    <a href="#proxy-headers" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="set-request-headers" class="text-xl font-semibold mt-8 mb-4">
                    3.1 设置请求头
                    <a href="#set-request-headers" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 可以设置一些 HTTP 头部信息，如 <code>Host</code>、<code>X-Real-IP</code> 和 <code>X-Forwarded-For</code>，这些信息通常被应用服务器用来处理请求：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>location / {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</code></pre>
                </div>
                
                <ul class="list-disc pl-6 space-y-2">
                    <li><code>Host</code>：原始请求的主机名。</li>
                    <li><code>X-Real-IP</code>：客户端的真实 IP 地址。</li>
                    <li><code>X-Forwarded-For</code>：客户端 IP 地址链，便于追踪请求来源。</li>
                    <li><code>X-Forwarded-Proto</code>：请求使用的协议（HTTP 或 HTTPS）。</li>
                </ul>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 4. HTTPS -->
        <section id="https" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-lock text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    4. 处理HTTPS
                    <a href="#https" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="https-config" class="text-xl font-semibold mt-8 mb-4">
                    4.1 配置HTTPS
                    <a href="#https-config" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 也可以与后端应用服务器进行 HTTPS 通信。需要配置 SSL/TLS 证书并在 <code>proxy_pass</code> 中使用 <code>https</code> 协议：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>server {
    listen 443 ssl;
    server_name demo.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        proxy_pass https://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 5. WebSocket -->
        <section id="websocket" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-random text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    5. WebSocket支持
                    <a href="#websocket" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="websocket-config" class="text-xl font-semibold mt-8 mb-4">
                    5.1 配置WebSocket代理
                    <a href="#websocket-config" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 可以代理 WebSocket 连接，这要求在代理配置中设置 <code>Upgrade</code> 和 <code>Connection</code> 头部：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>server {
    listen 80;
    server_name demo.com;

    location /ws/ {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 6. Proxy Cache -->
        <section id="proxy-cache" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-database text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    6. 代理缓存
                    <a href="#proxy-cache" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="cache-config" class="text-xl font-semibold mt-8 mb-4">
                    6.1 配置缓存
                    <a href="#cache-config" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 可以缓存后端服务器的响应，减少负载和提高性能：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>http {
    proxy_cache_path /data/nginx/cache keys_zone=my_cache:10m max_size=1g;
    
    server {
        listen 80;
        server_name demo.com;

        location / {
            proxy_pass http://backend;
            proxy_cache my_cache;
            proxy_cache_valid 200 1m;
            proxy_cache_valid 404 10s;
        }
    }
}</code></pre>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 7. Connection Timeout -->
        <section id="connection-timeout" class="mb-16">
            <div class="flex items-center mb-6">
                <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-clock text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-2xl font-bold">
                    7. 处理长连接和超时
                    <a href="#connection-timeout" class="header-anchor"><i class="fas fa-link"></i></a>
                </h2>
            </div>
            
            <div class="prose prose-indigo max-w-none mb-8">
                <h3 id="timeout-config" class="text-xl font-semibold mt-8 mb-4">
                    7.1 配置长连接
                    <a href="#timeout-config" class="header-anchor"><i class="fas fa-link"></i></a>
                </h3>
                <p>Nginx 还支持配置请求的超时和长连接设置，以确保稳定的后端通信：</p>
                
                <div class="code-block mt-4 mb-6">
                    <div class="lang-tag">nginx</div>
                    <pre><code>location / {
    proxy_pass http://backend;
    proxy_read_timeout 90s;
    proxy_connect_timeout 90s;
    proxy_send_timeout 90s;
}</code></pre>
                </div>
            </div>
        </section>

        <!-- Summary -->
        <section class="bg-indigo-50 rounded-xl p-8 mb-16">
            <div class="flex items-start">
                <div class="flex-shrink-0 mr-4">
                    <i class="fas fa-lightbulb text-indigo-600 text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-indigo-800">关键要点总结</h3>
                    <ul class="list-disc pl-6 space-y-2 text-gray-700">
                        <li>使用<code>proxy_pass</code>指令配置基本的反向代理</li>
                        <li>通过<code>upstream</code>模块实现负载均衡</li>
                        <li>正确设置代理请求头以传递客户端信息</li>
                        <li>为HTTPS通信配置SSL证书</li>
                        <li>支持WebSocket需要特殊头部配置</li>
                        <li>利用代理缓存提高性能</li>
                        <li>适当配置超时参数保证连接稳定性</li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">专注于IT技术分享与学习</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                        <i class="fas fa-external-link-alt mr-2"></i>访问技术小馆
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```